<template>
  <svg
    class="inline-block"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-join="round"
  >
    <circle cx="12" cy="12" r="9" />
    <line
      class="hour"
      x1="12"
      y1="12"
      x2="12"
      y2="8"
      :style="{ 'transform-origin': 'center center', transform: hourRotate }"
    />
    <line
      class="minute"
      x1="12"
      y1="12"
      x2="12"
      y2="7"
      :style="{ 'transform-origin': 'center center', transform: minuteRotate }"
    />
    <line
      v-if="secondHand"
      class="second"
      x1="12"
      y1="12"
      x2="12"
      y2="4"
      :style="{ 'transform-origin': 'center center', transform: secondRotate }"
    />
  </svg>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    hour: {
      type: Number,
      required: true,
    },
    minute: {
      type: Number,
      required: true,
    },
    second: {
      type: Number,
      default: 0,
    },
    secondHand: Boolean,
  },
  setup(props) {
    // const {hour, minute, second} =≈÷ toRefs(props);
    const hourRotate = computed(
        () => `rotate(${(props.hour / 12) * 360 + (props.minute / 60) * 30}deg)`
      ),
      minuteRotate = computed(
        () =>
          `rotate(${(props.minute / 60) * 360 + (props.second / 60) * 6}deg)`
      ),
      secondRotate = computed(() => `rotate(${(props.second / 60) * 360}deg)`);

    return {
      hourRotate,
      minuteRotate,
      secondRotate,
    };
  },
});
</script>
